<template>
  <div>
    <el-input type="number" v-model="number1" :controls="false">
      <template #prefix>
        <img
          v-if="!isCustom"
          src="@/assets/png/583.png"
          :style="
            'cursor:pointer;' + (isLeft ? '' : 'transform:rotate(180deg)')
          "
          @click.stop="changePos(0, isLeft)"
        />
        <img
          v-else
          src="@/assets/png/583.png"
          :style="
            'cursor:pointer;' +
            (conf?.num1?.position.includes('left')
              ? ''
              : 'transform:rotate(180deg)')
          "
        />
      </template>
      <template #suffix>
        <span>{{ conf?.num1?.suffix_label ?? "px" }}</span>
      </template>
    </el-input>
    <el-input type="number" v-model="number2" :controls="false">
      <template #prefix>
        <img
          v-if="!isCustom"
          src="@/assets/png/584.png"
          :style="'cursor:pointer;' + (isTop ? '' : 'transform:rotate(180deg)')"
          @click.stop="changePos(1, isTop)"
        />
        <img
          v-else
          src="@/assets/png/584.png"
          :style="
            'cursor:pointer;' +
            (conf?.num1?.position.includes('top')
              ? ''
              : 'transform:rotate(180deg)')
          "
        />
      </template>
      <template #suffix>
        <span>{{ conf?.num2?.suffix_label ?? "px" }}</span>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  created() {},
  /* 
conf={
  obj
  num1:{
    position
    v_model
    suffix_label
  }
  num2:{}
}
*/
  props: ["position", "isCustom", "conf"],
  computed: {
    positionStr() {
      return JSON.stringify(this.position) ?? ""
    },
    isLeft() {
      if (this.positionStr.includes("left")) return true
      return false
    },
    isTop() {
      if (this.positionStr.includes("top")) return true
      return false
    },
    number1: {
      get: (ctx) => {
        if (ctx.isCustom && ctx?.conf?.num1) {
          let val = 0
          if (ctx.conf.num1.v_model?.length == 1) {
            val = ctx.conf.obj[ctx.conf.num1.v_model[0]].replace(
              ctx.conf.num1.suffix_label,
              ""
            )
          } else if (ctx.conf.num1.v_model.length == 2) {
            val = ctx.conf.obj[ctx.conf.num1.v_model[0]][
              ctx.conf.num1.v_model[1]
            ].replace(ctx.conf.num1.suffix_label ?? "px", "")
          }
          return Number(val) ?? 0
        }

        if (!ctx.position) return 0
        let val = ctx.position[ctx.isLeft ? "left" : "right"].replace("px", "")
        return Number(val) ?? 0
      },
      set: function (val) {
        let ctx = this
        if (ctx.isCustom && ctx?.conf?.num1) {
          if (ctx.conf.num1.v_model?.length == 1) {
            ctx.conf.obj[ctx.conf.num1.v_model[0]] =
              (val || 0) + (ctx.conf.num1.suffix_label ?? "px")
            return true
          } else if (ctx.conf.num1.v_model.length == 2) {
            ctx.conf.obj[ctx.conf.num1.v_model[0]][ctx.conf.num1.v_model[1]] =
              (val || 0) + (ctx.conf.num1.suffix_label ?? "px")
            return true
          }
        }
        if (!this.position) return false
        this.position[this.isLeft ? "left" : "right"] = (val || 0) + "px"
        return true
      }
    },
    number2: {
      get: (ctx) => {
        if (ctx.isCustom && ctx.conf?.num2) {
          let val = 0
          if (ctx.conf.num2.v_model?.length == 1) {
            val = ctx.conf.obj[ctx.conf.num2.v_model[0]].replace(
              ctx.conf.num2.suffix_label,
              ""
            )
          } else if (ctx.conf.num2.v_model.length == 2) {
            val = ctx.conf.obj[ctx.conf.num2.v_model[0]][
              ctx.conf.num2.v_model[1]
            ].replace(ctx.conf.num2.suffix_label ?? "px", "")
          }
          return Number(val) ?? 0
        }
        if (!ctx.position) return 0
        let val = ctx.position[ctx.isTop ? "top" : "bottom"].replace("px", "")
        return Number(val) || 0
      },
      set: function (val) {
        let ctx = this
        if (ctx.isCustom && ctx.conf?.num2) {
          if (ctx.conf.num2.v_model?.length == 1) {
            ctx.conf.obj[ctx.conf.num2.v_model[0]] =
              (val || 0) + (ctx.conf.num2.suffix_label ?? "px")
            return true
          } else if (ctx.conf.num2.v_model.length == 2) {
            ctx.conf.obj[ctx.conf.num2.v_model[0]][ctx.conf.num2.v_model[1]] =
              (val || 0) + (ctx.conf.num2.suffix_label ?? "px")
            return true
          }
        }
        if (!this.position) return false
        this.position[this.isTop ? "top" : "bottom"] = (val || 0) + "px"
        return true
      }
    }
  },
  methods: {
    changePos(val, flg) {
      //0 - 1 |
      if (!val) {
        this.position[flg ? "right" : "left"] =
          this.position[flg ? "left" : "right"]
        delete this.position[flg ? "left" : "right"]
      } else {
        this.position[flg ? "bottom" : "top"] =
          this.position[flg ? "top" : "bottom"]
        delete this.position[flg ? "top" : "bottom"]
      }
    }
  }
}
</script>

<style>
</style>
<style lang="less" scoped>
.formCom .el-input {
  width: 115px;
}
</style>